<template>
  <div>
    <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      height="450px"
      width="700px"
			style="margin: 0 auto;"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          长春市: [125.28845, 43.83327, 20],
          吉林市: [126.57436, 43.88187, 20],
          四平市: [124.40946, 43.16208, 20],
          辽源市: [125.13682, 42.9015, 20],
          通化市: [125.95513, 41.7285, 20],
          白山市: [126.417, 41.94507, 20],
          松原市: [124.81698, 45.17185, 20],
          白城市: [122.85111, 45.6216, 20],
          延边朝鲜族自治州: [129.5091, 42.89119, 20],
        };
        const mapArrObj = ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州']
        
				let convertData = function (data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
								value: geoCoord.concat(data[i].value) ? geoCoord.concat(data[i].value) : 0
              });
            }
          }
          return scatterData;
        };
        this.options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            // position: point => {
            //   // 固定在顶部
            //   return [point[0] + 50, point[1] - 20];
            // },
            // 如果需要自定义 tooltip样式，需要使用formatter
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          visualMap: {
            min: 0,
            max: 10,
            show: false,
            seriesIndex: 0,
            // 颜色
            inRange: {
              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
            },
          },
          // 底部背景
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: '10%',
            left: '10%',
            map: '吉林',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(7,114,204, .8)',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                areaColor: '#00aeef',
              },
            },
          },
          series: [
            {
              name: '相关指数',
              type: 'map',
              aspectScale: 0.85, //长宽比
              zoom: 1.2,
              mapType: '吉林', // 自定义扩展图表类型
              top: '10%',
              left: '10%',
              itemStyle: {
                normal: {
                  color: 'red',
                  areaColor: 'rgba(19,54,162, .5)',
                  borderColor: 'rgba(0,242,252,.3)',
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: '#00f2fc',
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              label: {
                formatter: params => `${params.name}`,
                show: true,
                position: 'insideRight',
                textStyle: {
                  fontSize: 14,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: newData,
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: 7,
              effectType: 'ripple',
              legendHoverLink: false,
              showEffectOn: 'render',
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: 'stroke',
              },
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: '#99FBFE',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
              },
              data: convertData(mapArrObj),
            },
          ],
        };
        // 重新选择区域
        // this.handleMapRandomSelect();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 开启定时器
    // startInterval() {
    //   const _self = this;
    //   // 应通过接口获取配置时间，暂时写死5s
    //   const time = 2000;
    //   if (this.intervalId !== null) {
    //     clearInterval(this.intervalId);
    //   }
    //   this.intervalId = setInterval(() => {
    //     _self.reSelectMapRandomArea();
    //   }, time);
    // },
    // 重新随机选中地图区域
    // reSelectMapRandomArea() {
    //   const length = 9;
    //   this.$nextTick(() => {
    //     const map = this.$refs.centreLeft2ChartRef.chart;
    //     let index = Math.floor(Math.random() * length);
    //     while (index === this.preSelectMapIndex || index >= length) {
    //       index = Math.floor(Math.random() * length);
    //     }
    //     map.dispatchAction({
    //       type: 'mapUnSelect',
    //       seriesIndex: 0,
    //       dataIndex: this.preSelectMapIndex,
    //     });
    //     map.dispatchAction({
    //       type: 'showTip',
    //       seriesIndex: 0,
    //       dataIndex: index,
    //     });
    //     map.dispatchAction({
    //       type: 'mapSelect',
    //       seriesIndex: 0,
    //       dataIndex: index,
    //     });
    //     this.preSelectMapIndex = index;
    //   });
    // },
    // handleMapRandomSelect() {
    //   this.$nextTick(() => {
    //     const map = this.$refs.centreLeft2ChartRef.chart;
    //     const _self = this;
    //     setTimeout(() => {
    //       _self.reSelectMapRandomArea();
    //     }, 0);
    //     // 移入区域，清除定时器、取消之前选中并选中当前
    //     map.on('mouseover', function (params) {
    //       clearInterval(_self.intervalId);
    //       map.dispatchAction({
    //         type: 'mapUnSelect',
    //         seriesIndex: 0,
    //         dataIndex: _self.preSelectMapIndex,
    //       });
    //       map.dispatchAction({
    //         type: 'mapSelect',
    //         seriesIndex: 0,
    //         dataIndex: params.dataIndex,
    //       });
    //       _self.preSelectMapIndex = params.dataIndex;
    //     });
    //     // 移出区域重新随机选中地图区域，并开启定时器
    //     map.on('globalout', function () {
    //       _self.reSelectMapRandomArea();
    //       _self.startInterval();
    //     });
    //     this.startInterval();
    //   });
    // },
  },
};
</script>
